AngularJS For Dummies

Categories: JavaScript; Tagged with: AngularJS • JavaScript; @ November 26th, 2013 20:38

Overview

Why AngularJS?

MVC: Template(Html with AngularJS expression), Controller(no need to extend anything, pure JS function);

Data Binding: Easy to display/update data;

Routing & Multiple Views: build deep linking single page application;

Dependance Injection;

Testing;

Quick Start

AngularJS tutorial: key features in example http://code.angularjs.org/1.0.8/docs/tutorial

Seed Project: https://github.com/angular/angular-seed
Please note that the ‘Seed project’ may not using the latest stable version. so probably you need to change the AngularJS js lib.

App.js

config the application, set route mapping. for example:

// Declare app level module which depends on filters, and services
angular.module(‘demo-app’, [
‘demo-app.controllers’,
‘user.service’
]).
config([‘$routeProvider’, function($routeProvider) {
    $routeProvider.when(‘/user, {templateUrl: ‘partials/user/list.html’});
    $routeProvider.when(‘/user/show/:id’, {templateUrl: ‘partials/user/details.html’});
    $routeProvider.when(‘/script’, {templateUrl: ‘partials/script/list.html’, controller: ‘scriptListCtrl’});
    $routeProvider.otherwise({redirectTo: ‘/user’});
}]);

Module

Modules declaratively specify how an application should be bootstrapped. http://docs.angularjs.org/guide/module

In the seed project, the application break down into multiple modules like: Services, Directives, filters, ect,.

Basically, a module have two kinds of blocks: ‘Configuration blocks’ and ‘Run blocks’. the ‘config(…);’ in App.js is ‘Configuration block’. one typical difference is: in ‘Configuration block’ only can inject ‘Providers’ cannot inject instances.

http://stackoverflow.com/questions/10486769/cannot-get-to-rootscope
Data binding

<h1>User- Name: {{user.name}}</h1>
    <div>
        <form novalidate class=”angularJSForm”>
            Name:
                <input type=”text” ng-model=”user.name” required /> <br />
        </form>
    </div>
</div>

‘user’ is the model, and this instance is live in a ‘Scope’, each page have it’s own scope automatically, scope can be injected into controller.
Controller

No need to extend any interface, AngularJS takes the responsibility of injection:

function userDetailsCtrl($scope, $routeParams, $http, UserEditorService) {
    $scope.action = $routeParams.action;
    $scope.id = $routeParams.id;

      …
      $scope.onJobClicked = function(job) {
        $scope.currentJob = job;
      };

      $scope.showOrHide = function(job) {
        return angular.equals($scope.currentJob, job);
    };
}

Note: UserEditorService is a Service, AngularJS will inject the instance of the service to the controller.

You may inject the controller to a template by configuring app.js or set inside the template:
…

Service

How to create service:

var module = angular.module(‘user.service’, []);

module.service(‘UserEditorService’, function() {
        this.user;

        this.user= function(user) {
            this.user= user;
            console.log(‘Service\’s user updated’);
        };

        this.getUser= function() {
            console.log(“Get User: ” + this.user+ “, ” + this.toString());
            return this.user;
        };
    }
);

How to share data between different controller?

– There’s a global scope in AngularJS, however, I don’t think it’s a good way to share data using global scope;

– using service: ‘UserEditorService’ in ‘userDetailsCtrl’

JavaScript test framework

Jasmine: http://pivotal.github.io/jasmine/
Jasmine Maven Plugin http://searls.github.io/jasmine-maven-plugin/

With the help of “Jasmine Maven Plugin”, we can invoke the JavaScript Unit tests from Maven. this plugin contains a web server, we can check the test result via. browser.

How to run Test cases in Jenkins/Linux?

Jasmine Maven Plugin uses PhantomJS/HtmlUnit to execute JavaScript test. http://searls.github.io/jasmine-maven-plugin/phantomjs.html

you may specific the browser by modifying pom.xml. http://searls.github.io/jasmine-maven-plugin/test-mojo.html#browserVersion

Configuration Properties for Jasmine Maven Pluginhttp://gotofritz.net/blog/geekery/configuration-jasmine-maven-plugin/

How to run test cases and get the results?

mvn jasmine:bdd

This goal will start a build-in server, you may get/modify the port from pom.xml. Open any browser, then you can get the results based on the browser you’re using.

infinitest: Brilliant Continuous Test Runner for Java <-> Apache Flex 4.11 Released!